<template>
  <div class="workplace">
    <div class="nav-outer">
      <div class="fs-36 right-icon df aic jcc" @click="showPopup">
        <svg-icon iconClass="filter"></svg-icon>
      </div>
      <div class="nav df aic">
        <div
          class="nav-item fs-28"
          v-for="(item, index) in chooseObj?.choose"
          :key="item.id"
          @click="navTab(item, index)"
        >
          <p :class="{ 'text-active': index === currIndex }">{{ item.name }}</p>
          <p class="item-active" :class="{ active: index === currIndex }"></p>
        </div>
      </div>
    </div>
    <div class="ctx df aic jcsb list overflow-xy">
      <div class="item mb-12" v-for="item in list" :key="item.id" @click="detail(item)">
        <img :src="item.img" alt="" />
        <p class="mt-12 mb-12 fs-28 font333 bold">{{ item.title }}</p>
        <div class="mb-8 df aic">
          <p class="font999">教师：</p>
          <p class="font666">{{ item.username }}</p>
        </div>
        <div class="mb-8 df aic">
          <p class="font999">教室：</p>
          <p class="font666">{{ item.className }}</p>
        </div>
        <div class="df aic">
          <p class="font999">班级：</p>
          <p class="font666">{{ item.classroom }}</p>
        </div>
      </div>
    </div>
    <!-- 浮窗 -->
    <van-popup v-model:show="show" position="top" :style="{ width: '100%', height: '100%' }">
      <div class="work-popup overflow-xy df fdc fs-28">
        <div class="work-exit fs-32" @click="show = false">
          <svg-icon iconClass="close"></svg-icon>
        </div>
        <p class="fs-32 bold font333 mb-24">筛选课程</p>
        <p class="font333 mb-32 mt-32 fs-28 df aic jcsb">
          选择校区
          <svg-icon
            :iconClass="arrowToggle1 ? 'up' : 'down'"
            @click="arrowToggle1 = !arrowToggle1"
          ></svg-icon>
        </p>
        <div class="df fww lineee pdb-8" v-if="arrowToggle1">
          <div
            class="layer-btn mb-24 mr-16 fs-24"
            v-for="item in chooseObj.area"
            :key="item.id"
            :class="{ 'layer-btn--active': item.active }"
            @click="choose(item, 1)"
            >{{ item.name }}</div
          >
        </div>
        <p class="font333 mb-32 mt-32 fs-28 df aic jcsb">
          选择学院
          <svg-icon
            :iconClass="arrowToggle2 ? 'up' : 'down'"
            @click="arrowToggle2 = !arrowToggle2"
          ></svg-icon>
        </p>
        <div class="df fww lineee pdb-8" v-if="arrowToggle2">
          <div
            class="layer-btn mb-24 mr-16 fs-24"
            v-for="item in chooseObj.school"
            :key="item.id"
            :class="{ 'layer-btn--active': item.active }"
            @click="choose(item, 3)"
          >
            {{ item.name }}
          </div>
        </div>
        <p class="font333 mb-32 mt-32 fs-28 df aic jcsb">
          选择学科
          <svg-icon
            :iconClass="arrowToggle3 ? 'up' : 'down'"
            @click="arrowToggle3 = !arrowToggle3"
          ></svg-icon>
        </p>
        <div class="df fww lineee pdb-8" v-if="arrowToggle3">
          <div
            class="layer-btn mb-24 mr-16 fs-24"
            :class="{ 'layer-btn--active': item.active }"
            v-for="item in chooseObj.choose"
            :key="item.id"
            @click="choose(item, 2)"
          >
            {{ item.name }}
          </div>
        </div>

        <p class="font333 mb-32 mt-32 fs-28 df aic jcsb">
          课程状态
          <svg-icon
            :iconClass="arrowToggle4 ? 'up' : 'down'"
            @click="arrowToggle4 = !arrowToggle4"
          ></svg-icon>
        </p>
        <div class="df fww pdb-8" v-if="arrowToggle4">
          <div
            class="layer-btn mb-24 mr-16 fs-24"
            :class="{ 'layer-btn--active': item.active }"
            v-for="item in chooseObj.status"
            :key="item.id"
            @click="choose(item, 4)"
          >
            {{ item.name }}
          </div>
        </div>
        <div class="work-btn" @click="submit">确定</div>
      </div>
    </van-popup>
  </div>
</template>

<script lang="ts">
  import { defineComponent, reactive, toRefs, onMounted, watch } from 'vue';
  import { useRouter } from 'vue-router';
  import { getSourceList, getChooseType } from '@/api/source';
  import { SvgIcon } from '@/components/svg-icon';
  import store from '@/store';
  export default defineComponent({
    name: 'WorkPlace',
    components: {
      SvgIcon,
    },
    props: {},
    setup() {
      const router = useRouter();

      const state = reactive({
        valueName: '',
        active: '0',
        list: [] as any,
        show: false,
        chooseObj: {} as any,
        currChooseArr: [],
        nav: [] as any,
        currIndex: 0,
        arrowToggle1: true,
        arrowToggle2: true,
        arrowToggle3: true,
        arrowToggle4: true,
        queryParams: {
          areaId: null,
          chooseId: null,
          schoolId: null,
          statusId: null,
        },
      });
      // 检测是否查询
      watch(
        () => store.getters['common/classText'],
        (val) => {
          console.log(val);
          getData(val);
        }
      );

      onMounted(async () => {
        state.chooseObj = await getChooseType({});
        console.log(state.chooseObj);
        getData();
      });
      const getData = async (val?: string) => {
        const res = await getSourceList(Object.assign({ name: val }, state.queryParams));
        state.list = res.list;
      };
      // 提交弹窗数据
      const submit = () => {
        state.show = false;
        getData();
      };
      // 显示弹窗
      const showPopup = () => {
        state.show = true;
      };
      // 去详情页
      const detail = (item) => {
        router.replace(`/detail?id=${item.id}`);
      };
      const navTab = (item, index) => {
        state.currIndex = index;
      };
      const choose = (item, type) => {
        // item.active = true;
        if (type === 1) {
          state.queryParams.areaId = item.id;
          state.chooseObj.area.map((v) => {
            v.id === item.id ? (v.active = true) : (v.active = false);
          });
        } else if (type === 2) {
          state.queryParams.chooseId = item.id;
          state.chooseObj.choose.map((v) => {
            v.id === item.id ? (v.active = true) : (v.active = false);
          });
        } else if (type === 3) {
          state.queryParams.schoolId = item.id;
          state.chooseObj.school.map((v) => {
            v.id === item.id ? (v.active = true) : (v.active = false);
          });
        } else if (type === 4) {
          state.queryParams.statusId = item.id;
          state.chooseObj.status.map((v) => {
            v.id === item.id ? (v.active = true) : (v.active = false);
          });
        }
      };
      return {
        ...toRefs(state),
        showPopup,
        detail,
        navTab,
        choose,
        submit,
      };
    },
  });
</script>
<style lang="scss" scoped>
  .workplace {
    position: relative;
    // width: 702px;
  }
  .list {
    padding: 16px;
    flex-wrap: wrap;
  }

  .item {
    width: 320px;
    padding: 8px;
    min-height: 300px;

    > img {
      width: 320px;
      border-radius: 4px;
    }
  }

  .work-popup {
    padding: 80px 24px 208px 24px;
    position: relative;
    .work-btn {
      width: 702px;
      height: 96px;
      position: fixed;
      bottom: 32px;
      left: 24px;
      line-height: 96px;
      text-align: center;
      font-size: 32px;
      color: #fff;
      background-color: #5066e1;
      border-radius: 4px;
    }
    .work-exit {
      position: absolute;
      right: 24px;
      top: 82px;
    }
  }
  .nav-outer {
    position: fixed;
    top: 96px;
    left: 0;
    width: 100%;
    height: 96px;
    background: #fff;
    .right-icon {
      position: absolute;
      right: 0;
      top: 8px;
      height: 64px;
      width: 70px;
      background-color: #fff;
      z-index: 1;
    }
  }
  .nav {
    padding: 16px 24px 0;
    border-bottom: 1px solid #cecece;
    width: calc(100vw - 48px);
    overflow-x: auto;
    overflow-y: hidden;
    .nav-item {
      margin-right: 15px;
      width: 20%;
      min-width: 20%;
      padding-bottom: 16px;
      position: relative;
      text-align: center;
    }

    .item-active {
      width: 60px;
      height: 4px;
      position: absolute;
      bottom: 0;
      margin: auto;
      left: 0;
      right: 0;
      background-color: transparent;
    }
    .active {
      color: #5066e1;
      background-color: #5066e1;
    }
    .text-active {
      color: #5066e1;
      font-size: 36px;
      font-weight: bold;
    }
  }
  .ctx {
    padding-top: 106px;
  }
  .lineee {
    border-bottom: 1px solid #eee;
  }
  .layer-btn {
    padding: 16px 24px;
    border: 1px solid #ccc;
    border-radius: 4px;
  }
  .layer-btn--active {
    color: #fff;
    background-color: #5066e1;
    border: 1px solid #5066e1;
  }
</style>
